<template>
    <div class="tech-shop-after-sale-list">
        <div class="list-container">
            <div class="list-item" v-for="(item, index) in goodsList" :key="index">
                <ServerGoodsInfo :isBlock="false" :info="item" />
                <TechCell v-if="isOnlyRefund" class="detail-item" label="商品状态" :value="goodsStatus" is-link @click="openSelectGoodsStatus" />
                <TechCell v-else class="detail-item refund-price" label="退货数量">
                    <div class="price-value" slot="value">
                        <CountControl size="mini" :max="item.quantity" :count="refundCount" @minus="minusCount" @add="addCount" />
                    </div>
                </TechCell>
                <TechCell class="detail-item refund-price" label="退款金额">
                    <div class="price-value" slot="value">
                        <span class="label">￥</span>{{item.trans / 100}}
                    </div>
                </TechCell>
                <TechCell class="detail-item" label="退款原因" :type="reason ? 'normal' : 'gray'" :value="reason ? reason : '请选择原因'" is-link @click="openSelectRefundReason" />
            </div>
        </div>
        <!-- <div class="info-container">
            <ServerGoodsInfo />
            <div class="detail-info-container">
                <TechCell v-if="isOnlyRefund" class="detail-item" label="商品状态" :value="goodsStatus" is-link @click="openSelectGoodsStatus" />
                <TechCell v-else class="detail-item refund-price" label="退货数量">
                    <div class="price-value" slot="value">
                        <CountControl size="mini" :max="afterSaleGoods.quantity" :count="refundCount" @minus="minusCount" @add="addCount" />
                    </div>
                </TechCell>
                <TechCell class="detail-item refund-price" label="退款金额">
                    <div class="price-value" slot="value">
                        <span class="label">￥</span>100
                    </div>
                </TechCell>
                <TechCell class="detail-item" label="退款原因" :type="reason ? 'normal' : 'gray'" :value="reason ? reason : '请选择原因'" is-link @click="openSelectRefundReason" />
            </div>
        </div> -->
        <TechCell class="detail-item" label="退货备注" :type="afterSaleRemark ? 'normal' : 'gray'" :value="afterSaleRemark ? afterSaleRemark : '填写备注(选填)'" is-link @click="openRemarkModal" />
        <div class="action-container">
            <Button :style="themeBackround" :round="buttonRound" size="large" @click="apply">提交申请</Button>
        </div>
        <SelectGoodsStatus ref="status" @ensure="ensureStatus" />
        <SelectRefundReason ref="reason" @ensure="ensureReason" />
        <ServerRemark ref="remark" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Button } from 'vant';
import { TechCell } from '@components/base';
import { CountControl } from '@components/shop';
import ServerGoodsInfo from './aftersale/ServerGoodsInfo';
import SelectGoodsStatus from './aftersale/SelectGoodsStatus';
import SelectRefundReason from './aftersale/SelectRefundReason';
import ServerRemark from './aftersale/ServerRemark';
import { AFTER_SALE_GOODS_STATUS_TYPE, SHOP_ORDER_AFTER_SALE_TYPE } from '@constants/shop';
import { getUiMode, getUiTheme, getUiStyleMode } from '@biztools/info';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
import logger from '@common/logger';
export default {
    name: 'AfterSaleItemApply', // 售后申请页
    components: {
        TechCell,
        Button,
        CountControl,
        ServerGoodsInfo,
        SelectGoodsStatus,
        SelectRefundReason,
        ServerRemark,
    },
    data() {
        return {
            goodsStatus: AFTER_SALE_GOODS_STATUS_TYPE[0],
            reason: '',
            refundCount: 1,
            // 获取设置的配置信息
            mode: getUiMode() || DEFAULT_MODE,
            theme: getUiTheme() || DEFAULT_THEME,
            styleMode: getUiStyleMode() || DEFAULT_STYLE_MODE,
        };
    },
    computed: {
        ...mapState({
            afterSaleOrderInfo: state => state.shopOrder.afterSaleOrderInfo,
            afterSaleGoods: state => state.shopOrder.afterSaleGoods,
            afterSaleType: state => state.shopOrder.afterSaleType,
            afterSaleRemark: state => state.shopOrder.afterSaleRemark,
        }),
        goodsList() {
            logger.info('多商品售后：', this.afterSaleOrderInfo.details);
            return this.afterSaleOrderInfo.details;
        },
        isOnlyRefund() {
            return this.afterSaleType === SHOP_ORDER_AFTER_SALE_TYPE.onlyRefund;
        },
        buttonRound() {
            return this.styleMode === 'circle';
        },
        themeBackround() {
            return `background-color: ${this.theme};color: #FFFFFF;border: none;`;
        },
    },
    watch: {
        afterSaleGoods(val) {
            if (val) {
                this.refundCount = val.quantity;
            }
        }
    },
    mounted() {
        this.refundCount = this.afterSaleGoods.quantity || 1;
    },
    methods: {
        openSelectGoodsStatus() {
            this.$refs.status.show();
        },
        openSelectRefundReason() {
            this.$refs.reason.show();
        },
        openRemarkModal() {
            this.$refs.remark.show();
        },
        ensureStatus(value) {
            this.goodsStatus = value;
        },
        ensureReason(value) {
            this.reason = value;
        },
        minusCount() {
            this.refundCount -= 1;
        },
        addCount() {
            this.refundCount += 1;
        },
        apply() {
            // 提交申请
            const backId = '111111';
            this.$router.push(`/shop-order/after-sale/detail/${backId}`);
        },
    },
};
</script>

<style lang="less">
.tech-shop-after-sale-list {
    .p-v(@shop-bag-gap);
    min-height: calc(100vh - 2 * @shop-bag-gap);
    background-color: @shop-bg-color;
    .flex-column();
    justify-content: space-between;
    .list-container {
        .m-h(@shop-bag-gap);
        background-color: @white;
        border-radius: @border-radius;
        overflow: hidden;
        .p-v(@shop-gap);
        .p-h(@shop-bag-gap);
        .list-item {

        }
    }
    .detail-info-container {
        .m-h(@shop-bag-gap);
        background-color: @white;
        border-radius: @border-radius;
        overflow: hidden;
        .p-v(@shop-gap);
        .detail-item {
            height: 44px;
            line-height: 44px;
            .p-h(@shop-bag-gap);
            .van-cell__label {
                font-size: @font-size;
                color: @text-color;
            }
        }
        .refund-price {
            .price-value {
                font-size: @font-size-md;
                font-weight: 500;
                line-height: 1;
                font-family: @font-family-number;
                .label {
                    .m-r(-3);
                }
            }
        }
    }
    .action-container {
        .p-h(@shop-bag-gap);
        padding-bottom: 0;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>
